<!--
 * @Description: 
 * @Author: mxy
 * @Date: 2022-12-03 21:14:20
 * @LastEditors: mxy
 * @LastEditTime: 2022-12-04 20:30:34
-->
<template>
  <div class="left-container">
    <h2 ref="h2">Left</h2>
    <p ref="p">{{ age }}</p>
    <button @click="age++">加一</button>
    <art-list ref="artlistRef"></art-list>
  </div>
</template>

<script>
import ArtList from "@/components/ArtList.vue";
export default {
  data() {
    return {
      age: 20,
    };
  },
  components: {
    ArtList,
  },
  // beforeCreate() {
  //   console.log("beforeCreate", this.age);
  // },
  // created() {
  //   console.log("create", this.age);
  // },
  // beforeMount() {
  //   console.log("beforeMount", this.$refs.h2);
  // },
  // mounted() {
  //   console.log("mounted", this.$refs.h2);
  // },
  // beforeUpdate() {
  //   console.log(this.age, this.$refs.p.innerHTML);
  // },
  // updated() {
  //   console.log(this.age, this.$refs.p.innerHTML);
  // },
  // beforeDestroy() {
  //   console.log(this.$refs.p.innerHTML);
  // },
  // destroyed() {
  //   console.log(this.$refs.p);
  // },
};
</script>

<style lang="less" scoped>
.left-container {
  background-color: cadetblue;
}
</style>
